<template>
  <div class="j5-8">
      <!--标题-->
    <div class="j5-8-1">
      <img @click="returns()" src="../../../assets/2.svg" />
      <h3>我的留言</h3>
      <div></div>
    </div>
    <!--内容-->
    <div class="j5-8-2" v-for="item in list" :key="item.id">
        <div class="j5-8-2-div">
            <div class="j5-8-2-div1"> <img :src="item.tu" /></div>
            <div class="j5-8-2-div2">
                <div><p>{{item.title}}</p><p>{{item.title1}}<span>{{item.title2}}</span></p></div>
                <div>{{item.title3}}</div>
            </div>
        </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      list: [
        {
          id: 1,
          title: '小芳',
          title1: '07-17',
          title2: '23:54',
          title3: '留言的具体内容',
          tu: require('../../../assets/1.jpg')
        },
        {
          id: 2,
          title: '小芳',
          title1: '07-17',
          title2: '23:54',
          title3: '留言的具体内容',
          tu: require('../../../assets/1.jpg')
        },
        {
          id: 3,
          title: '小芳',
          title1: '07-17',
          title2: '23:54',
          title3: '留言的具体内容',
          tu: require('../../../assets/1.jpg')
        }
      ]
    }
  },
  methods: {
    returns(){
      this.$router.back()
    }
  }
}
</script>
<style>
.j5-8 {
  text-align: center;
}
/*标题*/
.j5-8-1 {
  height: 55px;
  line-height: 55px;
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px solid #ccc;
}
.j5-8-1 img {
  width: 20px;
  height: 20px;
  margin-top: 15px;
  margin-left: 15px;
}
.j5-8-1 h3 {
  font-weight: normal;
  flex: 6;
}
.j5-8-1 div {
  flex: 1;
}
/*内容*/
.j5-8-2 {
  width: 90%;
  margin: 0 auto;
}
.j5-8-2-div {
  height: 120px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 15px;
}
.j5-8-2-div1 {
  width: 20%;
  height: 120px;
  float: left;
}
.j5-8-2-div1 img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid #ccc;
  margin-top: 10px;
}
.j5-8-2-div2 {
  width: 78%;
  height: 120px;
  line-height: 40px;
  float: right;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.j5-8-2-div2 div {
  flex: 1;
  margin-top: 10px;
  color: #3f3f3f;
}
.j5-8-2-div2 div p {
    height: 20px;
    margin-bottom: 5px;
    font-size: 1.2rem;
    color: #000;
}
.j5-8-2-div2 div p span {
  margin-left: 15px;
}
</style>
